<template>
  <div v-if="dataList.length" class="table_scroll_wrapper">
    <stock-list
      :list="dataList"
      stockTag="heavy"
      unit="rem"
      fixed="left"
      :expand="false"
      :fixedHead="true"
      :offsetTop="offsetTop"
      @headSort="onSortClick"
      @clickRow="onRowClick"
    >
      <slot></slot>
    </stock-list>
  </div>
  <div v-else>
    <empty-pool></empty-pool>
  </div>
</template>

<script>
import { jumpTokline } from '@/utils';
import { sortCustom, sortNumber, sortDateStr } from '@/utils/tool';
import EmptyPool from '@/components/detail/EmptyPool.vue';

export default {
  data() {
    return {
      dataList: [],
      originList: [],
    };
  },
  props: {
    tableList: {
      default: () => [],
      type: Array,
    },
    offsetTop: {
      type: String,
      default: '0px'
    },
  },
  components: {
    EmptyPool,
  },
  watch: {
    tableList: {
      handler(val) {
        this.dataList = JSON.parse(JSON.stringify(val));
        this.originList = JSON.parse(JSON.stringify(val));
      },
      immediate: true,
    },
  },
  methods: {
    onSortClick(arg) {
      const customSortTypes = ['klinebx', 'qsld', 'zlld', 'cjjg', 'AIhyd'];
      const dateSortTypes = ['add_date', 'buy_date'];
      const noSortTypes = ['stock_code', 'industry', 'status', 'suggest_position', 'real_status'];
      if (noSortTypes.includes(arg.sortKey)) {
        return;
      }
      const SORT_TYPE = {
        default: 0,
        // 升序
        asc: 1,
        // 降序
        desc: 2,
      };
      if (customSortTypes.includes(arg.sortKey)) {
        this.dataList.sort(sortCustom(arg.sortKey));
      } else {
        dateSortTypes.includes(arg.sortKey)
          ? this.dataList.sort(sortDateStr(arg.sortKey))
          : this.dataList.sort(sortNumber(arg.sortKey));
      }

      // 根据排序标签调整排序方向
      if (arg.currentSortTag === SORT_TYPE.desc) {
        this.dataList.reverse();
      } else if (arg.currentSortTag === SORT_TYPE.default) {
        this.dataList = JSON.parse(JSON.stringify(this.originList));
      } else {
        //
      }
    },
    onRowClick(row) {
      jumpTokline(row.stock_code, row.market);
    },
  },
};
</script>

<style lang="less" scoped>
.stock_detail_template,
.table_in_template {
  color: var(--text-1);
}

.stock-td {
  width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
}
</style>
